<template>
  <div>
    <order-nav>
      <template #left>
        <img class="w-60 h-60" src="~@/assets/image/c2c/Group2324.png" alt="">
      </template>
    </order-nav>
    <div class="mt-26 px-34 font-43 font-700" style="color:#333333">{{$t('安全验证')}}</div>
    <div class="flex mt-60 font-600 font-32 text-center" style="color: #B8BCC5">
      <div
          class="flex-1 py-40"
          :class="{'active': activeIndex === 1}"
          @click="activeIndex = 1"
      >{{ $t('NAME/Google', { 'TITLE': TITLE })}}
      </div>
      <div
          class="flex-1 py-40"
          :class="{'active': activeIndex === 2}"
          @click="activeIndex = 2"
      >{{$t('短信验证')}}
      </div>
    </div>
    <van-divider/>
    <div class="px-34 mt-72">
      <div v-show="activeIndex === 1">
        <div class="text-grey">{{ $t('输入NAME/Google验证码', { 'TITLE': TITLE })}}</div>
        <div class="relative w-full mt-20 pb-46">
          <bus-input
              class="w-full h-96"
              :placeholder="$t('NAME/谷歌验证码', { 'TITLE': TITLE })"
              v-model="googleCode"
              btn-text="粘贴"
              :maxlength="6"
          />
        </div>
      </div>
      <div v-show="activeIndex === 2">
        <div class="text-grey">{{$t('输入短信验证码')}}</div>
        <div class="relative w-full mt-20">
          <bus-input
              class="w-full h-96"
              :placeholder="$t('短信验证码')"
              v-model="googleCode"
              :btn-text="codeText"
              :maxlength="6"
              @right-click="getMsgCode"
          />
        </div>
        <div v-show="showMsg" class="mt-18 font-24 text-grey">{{$t('验证码已发送至您的手机183****900！')}}</div>
      </div>
    </div>
    <div class="px-34 mt-46">
      <otc-button
          :disabled="googleCode.length >= 6"
          :text="$t('提交')"
      />
    </div>
    <div class="mt-38 font-28 text-blue text-center">{{$t('安全验证不可用？')}}</div>
  </div>
</template>

<script>
import {Divider} from 'vant';
import OrderNav from "@/components/order-nav/OrderNav";
import BusInput from "@/page/verification-code/components/BusInput";
import OtcButton from "@/components/otc-button/OtcButton";

export default {
  name: "VerificationCode",
  data() {
    return {
      timer: null,
      getCoding: false, // 获取验证码中
      codeText: this.$t('获取验证码'),
      showMsg: false, // 提示验证码已发送
      second: 60,
      activeIndex: 1,
      googleCode: '',
    }
  },
  methods: {
    // 获取验证码
    getMsgCode() {
      if (!this.getCoding) {
        //console.log('发送验证码');
        this.getCoding = true;
        setTimeout(() => {
          this.showMsg = true;
        }, 1000)

        this.timer = setInterval(() => {
          if (this.second <= 1) {
            clearInterval(this.timer)
            this.getCoding = false;
            this.second = 60;
            this.codeText = this.$t('获取验证码')
            this.showMsg = false;
            return;
          }
          this.second--;

          this.codeText = this.$t('重新获取')+`（${this.second}s）`;
        }, 1000)
      }
    }
  },
  components: {
    [Divider.name]: Divider,
    OrderNav,
    BusInput,
    OtcButton,
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .van-divider {
    margin: 0;
  }
}

.active {
  position: relative;
  color: #000;

  &:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 96px;
    height: 6px;
    border-radius: 20px;
    background: #1D91FF;
  }
}

</style>